
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>

    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">


</head>

<body>

<div id="wrapper">

 <div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>



    <div id="content" class="xgrid">
        <div class="x12">

            <h2>发票总表</h2>

            <a href="javascript:;" onclick="$('#description').toggle();">显示/隐藏说明</a>
            <div id="description" class="hide">
                发票使用流程为：入库->出库->使用/作废->交票<br/>
                总张数：从税务局入库至公司财务室的发票总张数<br/>
                出库数：从财务室出库至收费室收费员手中总张数<br/>
                未出数：即[总张数]减[出库数]<br/>
                已用数：从收费员手中打印给客户的发票总张数（保有第二联）<br/>
                作废数：从收费员手中做作废处理的发票总张数<br/>
                待用数：在收费员手中还可以使用的发票总数，即[出库数]-([已用数]+[作废数])<br/>
                已交数：从收费员手中交还至财务室进行归档做账的发票总张数<br/>
                未交数：尚留在收费员手中的发票，可以是已用的，作废的或待用的<br/>
                <br/>
            </div>
            <div class="table-responsive" id="app">
                <table class="data display datatable">
                    <thead>
                    <tr>
                        <th width="80">发票类型</th>
                        <th width="80">起始号码</th>
                        <th width="80">终止号码</th>
                        <th width="60">总张数</th>
                        <th width="60">出库数</th>
                        <th width="60">未出数</th>
                        <th width="60">已用数</th>
                        <th width="60">作废数</th>
                        <th width="60">待用数</th>
                        <th width="60">已交数</th>
                        <th width="60">未交数</th>
                        <th width="80">入库日期</th>
                        <th width="100">入库操作员</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list">
                        <td v-if="item.invoiceType===0">普通发票</td>
                        <td v-if="item.invoiceType===1">增值税发票</td>
                        <td v-text="item.startNo"></td>
                        <td v-text="item.endNo"></td>
                        <!--<td>{{item.endNo}}</td>-->
                        <td>{{item.inCounts}}</td>
                        <td>{{item.outCounts}}</td>
                        <td>{{item.inCounts-item.outCounts}}</td>
                        <td>{{item.used}}</td>
                        <td>{{item.invalid}}</td>
                        <td>{{item.outCounts-item.used-item.invalid}}</td>
                        <td>{{item.arCounts}}</td>
                        <td>{{item.outCounts-item.arCounts}}</td>
                        <td>{{item.inDate}}</td>
                        <td>{{item.empNmae}}</td>
                    </tr>
                    </tbody>
                    <!--<template>-->
                    <!--<Pagination url="/FPZB" v-model="{{size}}"/>-->
                    <!--</template>-->
                </table>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: [],
            }
        },
        mounted() {
            axios.get('/FPZB').then(response => (this.list = response.data));
        },

        watch: {
            list: function () {
                this.$nextTick(function () {
                    $(document).ready(function () {
                        Dashboard.init();
                    });
                })
            },
        },
    });
</script>
</body>
</html>